<template>
  <div class="page-common">
    <div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'>
      <button class="mui-btn mui-numbox-btn-minus" type="button" @click="descNumber">-</button>
      <input class="mui-numbox-input" type="number"  v-model="count"/>
      <button class="mui-btn mui-numbox-btn-plus" type="button" @click="addNumber">+</button>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
          count:1, //购买商品数量
      }

    },
    components: {},
    methods:{
      descNumber(){
          this.count --;
          if(this.count <1){
              this.count = 1;
          }
        this.sendMessage();
      },
//      点击一次就发送一次数据
      addNumber(){
        this.count ++;
        this.sendMessage();
      },
//      发送数据的方法
      sendMessage(){
        this.$emit('dataobj',this.count);
      }
    }
  }
//  由于在goodinfo上使用，所以涉及到子组件传值给父组件
//  1,在子组件中，利用一个this.emit("dataobject",count) 将count值传给父组件
//  2,在父组件接收中使用，使用inputNumber注册一个事件名为dataobj的事件，将来这个方法中的第一次参数就是inputNumber中传过来的值

</script>
<style scoped>
  .page-common{
    display: inline-block;
    margin:5px;
  }
</style>
